@keyframes background-breathing {
	0% {
		// 初始状态
		background-size: 100% 100%;
		opacity: 0.8;
	}

	50% {
		// 中间状态：光晕稍微放大，亮度稍微降低
		background-size: 110% 110%;
		opacity: 0.65;
	}

	100% {
		// 回到初始状态
		background-size: 100% 100%;
		opacity: 0.8;
	}
}

page {
	position: relative; // 使得伪元素可以相对于页面定位
	z-index: 0; // 确保页面内容在伪元素之上
	--td-navbar-bg-color: transparent;
	--button-plain-background-color: transparent;

	.navbar--t-navbar__center {
		justify-content: flex-end;
	}
}

page::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: -1; // 将伪元素置于最底层

	// 将渐变应用到伪元素上
	background-image: radial-gradient(circle 400rpx at 50% 280rpx,
			rgba(175, 225, 200, 0.75) 0%,
			rgba(247, 249, 248, 0) 65%);
	background-repeat: no-repeat;

	animation: background-breathing 12s ease-in-out infinite;
}

.amount {
	display: flex;
	align-items: baseline;
	font-size: 38rpx;
	color: #232323;
	font-weight: bold;
	margin-right: 10rpx;
	display: flex;
	align-items: baseline;
	.desc {
		font-size: 20rpx;
		font-weight: 400;
		color: var(--color-info);
		vertical-align: middle;
	}
}

.balance-top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;

	.logo {
		margin-right: 24rpx;
	}

	.balance-info {
		display: flex;
		align-items: center;

		.balance-main {
			display: flex;
			flex-direction: column;
			font-size: 32rpx;
			color: #fff;
			font-weight: 500;
		}

		.label {
			font-size: 26rpx;
			color: #232323;
		}


	}
}



.container {
	box-sizing: border-box;
	margin: 110rpx 0 0;

	.ad-view {
		margin: 110rpx var(--space-lg) 0;
	}

	.ac-view {
		display: flex;
		justify-content: space-evenly;
		margin: 10rpx auto 0;
	}

	/* 动画定义 */
	// 轨道旋转动画
	@keyframes orbit {
		from {
			transform: rotate(0deg);
		}

		to {
			transform: rotate(360deg);
		}
	}

	// 修正图标方向的逆向旋转动画
	@keyframes counter-orbit {
		from {
			transform: translateY(-50%) rotate(0deg);
		}

		to {
			transform: translateY(-50%) rotate(-360deg);
		}
	}

	// 中心按钮涟漪动画
	@keyframes ripple {
		0% {
			transform: scale(1);
			opacity: 0.4;
		}

		100% {
			transform: scale(2.5);
			opacity: 0;
		}
	}

	/* 主要回收模块 */
	.recycle-module {
		position: relative;
		width: 100%;
		height: 350rpx; // 增加高度以容纳更大的轨道
		margin: 20rpx 0;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	/* 轨道动画的容器 */
	.orbit-container {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	/* 轨道路径 (核心) */
	.orbit-path {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 280rpx; // 轨道的直径
		height: 1px; // 路径本身不可见
		transform-origin: left center; // 设置旋转中心为左侧中点 (即屏幕中心)
		animation: orbit 25s linear infinite; // 应用轨道旋转动画，25秒一圈
		transition: width 1.2s cubic-bezier(0.68, -0.55, 0.27, 1.55), opacity 1s ease-out;
		z-index: 99;

		// 为每个轨道路径设置不同的初始角度和动画延迟，使其均匀分布
		&:nth-child(1) {
			width: 245rpx;
			// animation: orbit 20s linear infinite;
			animation-delay: -26s;
		}

		&:nth-child(2) {
			width: 266rpx;
			// animation: orbit 30s linear infinite;
			animation-delay: -21s;
		}

		&:nth-child(3) {
			width: 266rpx;
			// animation: orbit 25s linear infinite;
			animation-delay: -16s;
		}

		&:nth-child(4) {
			width: 250rpx;
			// animation: orbit 22s linear infinite;
			animation-delay: -11s;
		}

		&:nth-child(5) {
			width: 258rpx;
			// animation: orbit 28s linear infinite;
			animation-delay: -31s;
		}
	}

	/* 分类图标项 */
	.category-item {
		position: absolute;
		right: 0; // 将图标放在轨道路径的末端
		top: 50%;
		transform: translateY(-50%); // 垂直居中
		display: flex;
		flex-direction: column;
		align-items: center;
		// 应用逆向旋转动画，保持图标和文字始终朝上
		animation: counter-orbit 25s linear infinite;
		transition: transform 1.2s cubic-bezier(0.68, -0.55, 0.27, 1.55), opacity 1s ease-out;

		// 同步动画延迟
		.orbit-path:nth-child(1) & {
			animation: counter-orbit 20s linear infinite;
			animation-delay: -16s;
		}

		.orbit-path:nth-child(2) & {
			animation: counter-orbit 30s linear infinite;
			animation-delay: -24s;
		}

		.orbit-path:nth-child(3) & {
			animation: counter-orbit 25s linear infinite;
			animation-delay: -15s;
		}

		.orbit-path:nth-child(4) & {
			animation: counter-orbit 22s linear infinite;
			animation-delay: -8s;
		}

		.orbit-path:nth-child(5) & {
			animation: counter-orbit 28s linear infinite;
			animation-delay: 0s;
		}
	}

	.is-absorbing {
		.orbit-path {
			width: 0;
			opacity: 0;
			animation-play-state: paused; // 暂停旋转动画
		}

		.category-item {
			// 图标本身也缩小并消失，增强效果
			transform: translateY(-50%) scale(0);
			opacity: 0;
			animation-play-state: paused; // 暂停逆向旋转
		}
	}

	.category-icon {
		width: 70rpx;
		height: 70rpx;
	}

	.category-label {
		color: #787878;
		font-size: 24rpx;
		margin-top: 4rpx;
		letter-spacing: 1rpx;
		background-color: rgba(255, 255, 255, 0.7); // 加一点背景色避免文字和背景元素重叠
		padding: 2rpx 6rpx;
		border-radius: 8rpx;
	}

	/* 回收按钮 (太阳) */
	.recycle-btn {
		position: relative; // 用于伪元素定位
		z-index: 10; // 确保在最上层
		width: 240rpx;
		height: 240rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: linear-gradient(135deg, #53e18b 0%, #06d39c 98%);
		box-shadow: 0 10rpx 30rpx 0 rgba(25, 190, 107, 0.45), inset 0 4rpx 10rpx rgba(255, 255, 255, 0.2); // 新增：内阴影，模拟顶部高光
		border-radius: 50%; // 改为圆形
		border: none;
		font-size: 36rpx;
		color: #fff;
		font-weight: 500;
		letter-spacing: 2rpx;

		&:active {
			transform: scale(0.95); // 增加一个按下的反馈
		}

		// 涟漪效果的伪元素
		&::after {
			content: '';
			position: absolute;
			z-index: -1;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			border-radius: 50%;
			background: linear-gradient(135deg, #53e18b 0%, #06d39c 98%);
			animation: ripple 2s ease-out infinite;
		}
	}

	/* 标语部分样式 (使用新的类名) */
	.slogan-container {
		width: 100%;
		padding-bottom: 10rpx;
		margin-top: 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		overflow: hidden;

		.title {
			color: #bdbdbd;
			font-weight: bold;
			font-size: 30rpx;
			text-align: center;
		}


		.count-row {
			display: flex;
			align-items: baseline;
			margin-bottom: 10rpx;
		}

		.count-num {
			color: #9d9d9d;
			font-size: 66rpx;
			font-weight: bold;
			font-family: DIN;
		}

		.unit {
			color: #9d9d9d;
			font-size: 38rpx;
			font-weight: bold;
			margin-left: 8rpx;
		}

		.co2 {
			color: #9d9d9d;
			font-size: 38rpx;
			font-weight: bold;
			margin-left: 4rpx;
		}

		.desc {
			color: #cfcfcf;
			font-size: 22rpx;
			text-align: center;
		}
	}
}